import React, { useState, useContext, createContext, useRef, createRef } from 'react'
import { Link, useHistory } from "react-router-dom";
import { Button, Modal, message } from 'antd'
import 'antd/dist/antd.css'
import './index.scss'
import { Input, Form } from 'antd';
import axios from 'axios';

//建立传递变量值的公共变量

const userLevel = createRef(null)//用户级别
export const userName = createRef([1, 2, 3])//用户名称
const userPwd = createRef(null)//用户密码

//建立控制页面显示的公共变量

const showEvententer = createRef(false)//显示事件录入界面
const showDetails = createRef(false)//显示绩效详情页面

//主页逻辑——登录与退出
export default function MainPage() {
    const history = useHistory()
    const [ulvl, setUlvl] = useState('123')
    if (userName.current === null || userPwd.current === null) {
        return <div>
            登录前
                <Login_Page />
            <Button onClick={(e) => {
                console.log('用户名为：' + userName.current)
            }
            }>模拟登录</Button>

        </div>
    }
    if (showEvententer) {
        return <Unmcon.Provider value='xxx'>
        <Event_select />

        </Unmcon.Provider>
    }
    return <div>
        登录了
        {console.log('用户名为：' + userName.current)}
        {console.log('用户为：' + userPwd.current)}
        {console.log('用户身份为：' + userLevel.current)}
        <Button onClick={() => { userName.current = null; userPwd.current = null; console.log(userPwd.current); history.push('/main') }}>
            模拟退出登录</Button>
    </div>
}

//登录后逻辑——判断用户身份

export function UserLevel() {
    const ulvl = useContext(userLevel)
    return <div>
        用户身份为{ulvl}
    </div>
}

//登录界面

export function Login_Page() {
    const FormItem = Form.Item;
    const [name, setName] = useState('')
    const [pwd, setPwd] = useState('')
    const history = useHistory();
    return <div className="container">
        <div>

            <h1>绩效管理系统</h1>
            <Form className={"login-form"}>
                <FormItem key='1'>
                    <Input placeholder={"请输入用户名"} maxLength={50} onChange={(event) => {

                        setName(event.target.value);
                        Uname.current= event.target.value
                        userName.current = event.target.value
                        console.log(Uname)

                    }} />
                </FormItem>
                <FormItem>
                    <Input placeholder={"请输入密码"} maxLength={50} type="password" onChange={(event) => {
                        setPwd(event.target.value)
                        userPwd.current = event.target.value
                        Upwd.current = event.target.value
                        console.log(Upwd)
                    }} />
                </FormItem>
                <label>用户名：{name}    密码：{pwd}</label>
                <FormItem>
                    <Button type="primary" onClick={(e) => {
                        login(userName.current, userPwd.current).then((response) => {
                            let res = response.data;
                            console.log(res.ret)
                            if (res.ret === 0) {
                                message.success('欢迎' + userName.current + '进入绩效考核系统')
                                Modal.confirm({
                                    title: '欢迎界面',
                                    content: <p>'欢迎'+{userName.current}+'进入绩效考核系统'</p>,
                                    okText: <div>进入绩效考核系统</div>,
                                    cancelText: <div>进入事件上传系统</div>,
                                    onOk: () => {
                                        showDetails.current = true
                                        showEvententer.current = false
                                    },
                                    onCancel: () => {
                                        showEvententer.current = true
                                        showDetails.current = false
                                        history.push('/main')
                                    }
                                })
                            }
                        })
                    }}>登录</Button>
                </FormItem>


            </Form>





            <Link to="/login">点击跳转到登录页</Link>
            <br />
            <Link to="/home">点击跳转到主页面</Link>
            <br />


        </div>

    </div>

}
function login(name, pwd) {
    return axios.post('http://127.0.0.1:8000/api/showpage/allpeople?',
        {

            'action': 'login',
            'username': name,
            'password': pwd


        })
}